<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Install NoneOS</title>
    <script>
      {
        fetch("/package-use-online");
        let count = 1;
        window.__useOnlinePkgTimer = setInterval(() => {
          const check = () => {
            if (count > 2) {
              clearInterval(window.__useOnlinePkgTimer);
              window.__useOnlinePkgTimer = null;
            }
          };

          fetch("/package-use-online")
            .then((e) => {
              if (/^4/.test(e.status)) {
                count++;
                check();
              }
            })
            .catch((e) => {
              count++;
              check();
            });
        }, 2000);
      }
    </script>

    <script src="/packages/libs/ofa/ofa.js#debug"></script>
    <link rel="stylesheet" href="/packages/pui/css/colors.css" />
    <link rel="stylesheet" href="/packages/others/colors.css" pui-colors />
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        height: 100%;
      }

      body {
        font: 400 1em/1.8 -apple-system, BlinkMacSystemFont, Segoe UI,
          Microsoft Yahei, Helvetica, Arial, sans-serif, Apple Color Emoji,
          Segoe UI Emoji;
      }

      .loading {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        color: var(--md-sys-color-on-surface, #1b1b1b);
        background-color: var(--md-sys-color-surface, #f1f1f1);
        background-size: cover;
        background-position: center;
        z-index: 20;
        transition: all 0.2s ease;
      }

      @media (prefers-color-scheme: dark) {
        .loading {
          color: var(--md-sys-color-on-surface, #f1f1f1);
          background-color: var(--md-sys-color-surface, #1b1b1b);
        }
      }
    </style>

    <!-- Google tag (gtag.js) -->
    <script
      async
      src="https://www.googletagmanager.com/gtag/js?id=G-PRC5EFJFW1"
    ></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag() {
        dataLayer.push(arguments);
      }
      gtag("js", new Date());

      gtag("config", "G-PRC5EFJFW1");
    </script>
  </head>
  <body>
    <l-m src="/packages/i18n/localized-content.html"></l-m>
    <n-desktop-bg></n-desktop-bg>
    <div class="loading">Loading...</div>
    <n-installer appicon="/packages/others/logo.png" step="0">
      <div install-name>
        <n-desc name="install" space="installer"></n-desc>
      </div>
      <n-installer-page>
        <div step-name>
          <n-desc name="welcome" space="installer"></n-desc>
        </div>
        <o-page src="/install/pages/welcome.html"></o-page>
      </n-installer-page>
      <n-installer-page>
        <div step-name>
          <n-desc name="agreement" space="installer"></n-desc>
        </div>
        <o-page src="/install/pages/agreement.html"></o-page>
      </n-installer-page>
      <n-installer-page>
        <div step-name>
          <n-desc name="startInstall" space="installer"></n-desc>
        </div>
        <template>
          <o-page src="/install/pages/install-os.html"></o-page>
        </template>
      </n-installer-page>
      <n-installer-page>
        <div step-name>
          <n-desc name="installEnd" space="installer"></n-desc>
        </div>
        <template>
          <o-page src="/install/pages/installed.html"></o-page>
        </template>
      </n-installer-page>
    </n-installer>
    <l-m src="/packages/comps/desktop-bg.html"></l-m>
    <script type="module">
      const load = lm(import.meta);

      await new Promise((r) => {
        setTimeout(r, 200);
      });

      const { init } = await load("/packages/fs/main.js");

      // 初始化几个重要目录
      await init("local"); // 用户的本地数据
      await init("apps"); // 应用目录
      await init("packages"); // 运行虚拟系统的文件
      await init("system"); // 存储系统初始化数据，这个目录不要暴露给用户

      await new Promise((r) => {
        setTimeout(r, 300);
      });

      const { setSpace } = await load("/packages/i18n/data.js");
      setSpace("installer", "/install/lang");

      $(".loading").text = `Loading 0/3`;
      await load("/packages/i18n/n-desc.html");
      await load("/packages/pui/public/init.js");
      $(".loading").text = `Loading 1/3`;
      await load("/packages/pui/provider/provider.html");
      $(".loading").text = `Loading 2/3`;
      await load("/packages/comps/installer/installer.html");
      $(".loading").text = `Loading 3/3`;
      await load("/packages/comps/installer/installer-page.html");

      $(".loading").style.opacity = 0;
      setTimeout(() => {
        $(".loading").remove();
      }, 200);
    </script>
  </body>
</html>
